import { useState, useEffect, useCallback } from 'react';
import { Table, Tabs } from '@hcltmac/core';
import {getCompanyList, getMortgageList} from '@/apis'
import './account.css'

export default () => {
  const [dataSource, setDataSource] = useState([])
  const fetchMortgageList = useCallback(async () => {
    const res = await getMortgageList()

    setDataSource(res.result.records)
  }, [])

  useEffect(() => {
    fetchMortgageList()
  }, [])

  const columns = [
    {
      title: '资产编号',
      key: 'assertNo',
      dataIndex: 'assertNo'
    },
    {
      title: '审批状态',
      key: 'statusDesc',
      dataIndex: 'statusDesc'
    },
    {
      title: '融资产品',
      key: 'productName',
      dataIndex: 'productName'
    },
    {
      title: '付款金额',
      key: 'amount',
      dataIndex: 'amount'
    },
    {
      title: '提前回款金额',
      key: 'loanAmount',
      dataIndex: 'loanAmount'
    },
    {
      title: '提前回款利息',
      key: 'fee',
      dataIndex: 'fee'
    },
    {
      title: '供应商',
      key: 'companyName',
      dataIndex: 'companyName'
    },
    {
      title: '购方名称',
      key: 'purchaserName',
      dataIndex: 'purchaserName'
    },
    {
      title: '资金方',
      key: 'fundName',
      dataIndex: 'fundName'
    }
  ]

  return <div className={'account-wrapper'}>
    <div className={'account-wrapper-filter'} onClick={() => {
      getMortgageList()
    }
    }>供应商</div>
    <div className={'account-wrapper-data'}>
      <div className={'account-wrapper-tabs'}>
        <Tabs defaultActiveKey={'1'}>
          <Tabs.TabPane key={'1'} tab={'待授权'} />
          <Tabs.TabPane key={'2'} tab={'授权通过'} />
          <Tabs.TabPane key={'3'} tab={'资方审核通过'} />
        </Tabs>
      </div>
      <Table
        columns={columns}
        dataSource={dataSource}
        scroll={{
          y: 500
        }
        }
        pagination={{
            pageSize: 20,
            total: 50,
            slim: true
          }
        }
      />
    </div>
    <div className={'account-wrapper-footer'}></div>
  </div>
}
